<template>
  <view>
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="我的错题"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
    </view>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="content">
      <view v-show="current === 0">
        <view class="" v-for="(item, index) in errorzjList" :key="index">
          <view class="subtitle" @click="showSub(index)">
            <image v-if="activeIndex === index" src="../../../../static/img/practice/zhk_icon.png"></image>
            <image v-else src="../../../../static/img/practice/jia_icon.png"></image>
            <image src="" mode=""></image>
            {{ item.SubName }}
          </view>
          <view class="subname" v-show="activeIndex === index">
            <view class="subinfo" v-for="(items,indexs) in item.List" :key="indexs">
              {{ items.ChapterName }}
              <button @click="goZj(items.ChapterId)" type="mini-btn">开始答题</button>
            </view>
          </view>
        </view>
        <view style="height:10px;background-color: #f2f2f2;"></view>
      </view>
      <view v-show="current === 1">
        <view class="paper" v-for="(item,index) in errorytList" :key="index">
          <view class="paperimg"><image src="../../../../static/img/practice/moni.png"></image></view>
          <view class="papertitle">{{item.PaperName}}</view>
          <view class="papernumber">{{item.Count}}</view>
          <view class="paperbtn"><button @click="goYtMn(item.PaperId)">开始答题</button></view>
        </view>
      </view>
      <view v-show="current === 2">
        <view class="paper" v-for="(item,index) in errormnList" :key="index">
          <view class="paperimg"><image src="../../../../static/img/practice/moni.png"></image></view>
          <view class="papertitle">{{item.PaperName}}</view>
          <view class="papernumber">{{item.Count}}</view>
          <view class="paperbtn"><button @click="goYtMn(item.PaperId)">开始答题</button></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"  
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
export default {
  components: {
    uniSegmentedControl,
    statusBar
  },
  data() {
    return {
      items: ['章节练习', '终极押题', '全真模拟'],
      activeIndex: -1,
      current: 0,
      styleType: 'text',
      activeColor: '#27B28B',
      errorzjList: [],
      errorytList: [],
      errormnList: []
    };
  },
  created() {
  	this.getChapterList();
    this.getYatiList();
    this.getMoniList();
  },
  methods: {
    //获取收藏的章节练习
    getChapterList: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/GetChapterList',
        data: {},
        success: res => {
          if(res.data.state == 'success'){
            this.errorzjList = res.data.data;
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    //获取收藏的终极押题
    getYatiList: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/GetWrongPaperList',
        data: {
          paperType: '2'
        },
        success: res => {
          if(res.data.state == 'success'){
            this.errorytList = res.data.data;
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    //获取收藏的终极押题
    getMoniList: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/GetWrongPaperList',
        data: {
          paperType: '3'
        },
        success: res => {
          if(res.data.state == 'success'){
            this.errormnList = res.data.data;
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    goZj: function(chapterid){
      uni.navigateTo({
      	url: '../../../practice/practice?type=cuoti&mold=zjlx&id='+ chapterid +'',
      })
    },
    goYtMn: function(paperid){
      uni.navigateTo({
      	url: '../../../practice/practice?type=cuoti&mold=ytmn&id='+ paperid +'',
      })
    },
    onClickItem(index) {
      if (this.current !== index) {
        this.current = index;
      }
    },
    showSub(index) {
      if (index == this.activeIndex) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
    }
  }
};
</script>

<style scoped>
.line {
  height: 15upx;
  background-color: #f2f2f2;
}
.uni-padding-wrap {
  background-color: #fff;
}
.segmented-control {
  width: 100% !important;
}
.segmented-control-item {
  line-height: 40px !important;
}
.content {
  background-color: #fff;
}
.subtitle {
  height: 80upx;
  color: #333333;
  line-height: 80upx;
  font-size: 28upx;
  text-indent: 72upx;
  position: relative;
  width: 100%;
  border-bottom: 1upx solid #dddddd;
}
.subtitle:last-child {
  border-bottom: none !important;
}
.subtitle image {
  position: absolute;
  width: 30upx;
  height: 30upx;
  top: 27upx;
  left: 27upx;
}
.subinfo {
  position: relative;
  height: 80upx;
  color: #666666;
  line-height: 80upx;
  font-size: 24upx;
  text-indent: 100upx;
  position: relative;
  width: 100%;
  border-bottom: 1upx solid #dddddd;
}
.subinfo button {
  position: absolute;
  top: 17upx;
  right: 25upx;
  width: 120upx;
  height: 48upx;
  line-height: 48upx;
  background-color: #f2f2f2;
  border-radius: 4px;
  text-indent: 0;
  font-size: 24upx;
  color: #666666;
  padding: 0;
}
.paper{
  height: 80upx;
  display: flex;
  border-bottom: 1upx solid #DDDDDD;
  font-size: 28upx;
  flex-direction: row;
  justify-content: flex-start;
}
.paperimg{
  display: flex;
  width: 95upx;
  justify-content: center;
  align-items: center;
}
.paperimg image{
  width: 50upx;
  height: 50upx;
}
.papertitle{
  width: 410upx;
  align-items: center;
  line-height: 80upx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.papernumber{
  line-height: 80upx;
  display: flex;
  width: 100upx;
  justify-content: center;
  align-items: center;
}
.paperbtn{
  display: flex;
  width: 145upx;
  justify-content: flex-start;
  align-items: center;
}
.paperbtn button{
  width: 120upx;
  height: 48upx;
  line-height: 48upx;
  border-radius: 4px;
  border: none;
  background-color: #f2f2f2;
  color: #666666;
  font-size: 26upx;
  padding: 0;
  margin: 0;
}

</style>
